<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: red;
      position: absolute;
    }

    section {
      width: 200px;
      height: 200px;
      background-color: lightblue;
    }
  </style>
</head>
<body>
  <div></div>

  <input type="text">

  <form action="">
    <input type="text">
    <input type="submit">
  </form>


  <input type="text" class="input">


  <input type="checkbox">
  <label for="">我已阅读此条款</label>


  <section></section>

  <script>
    // 拖拽
    const div = document.querySelector("div");
    // isDown表示是否在div的区域内按下了鼠标
    let isDown = false;
    // offsetX和offsetY表示鼠标点下去的时候，离元素的左上角的距离
    // 小心函数作用域的问题
    // 可以将变量变成全局变量，每一个函数都可以使用这个变量
    let offsetX;
    let offsetY;

    div.addEventListener("mousedown", (e) => {
      isDown = true;
      // offsetX和offsetY表示鼠标点下去的时候，离元素的左上角的距离
      offsetX = e.clientX - div.offsetLeft;
      offsetY = e.clientY - div.offsetTop;
    })
    div.addEventListener("mousemove", (e) => {
      if (isDown) {
        // console.log(e.clientX, e.clientY);
        div.style.left = e.clientX - offsetX + "px";
        div.style.top = e.clientY - offsetY + "px";
      }
    })
    div.addEventListener("mouseup", () => {
      isDown = false;
    })




    document.querySelector("input").addEventListener("keyup", (e) => {
      // console.log(e.keyCode); // 键盘码
      // 尽量不要用键盘码了，js官方说键盘码以后不用了
      console.log(e.key)
    })


    document.querySelector("form").addEventListener("submit", (e) => {
      // 阻止默认行为
      // 除了表单提交会刷新，a标签的跳转，鼠标右键
      e.preventDefault();
      console.log("submit");
    })
    // const submit = (event) => {
    //   event.preventDefault();
    //   console.log("submit");
    // }



    document.querySelector(".input").addEventListener("change", () => {
      console.log(11);
      
    })


    // window.addEventListener("load", () => {
      // ...
    // })

    document.querySelector("section").addEventListener("touchstart", () => {
      console.log("touchstart");
    })




    
    // 常见的事件有哪些?

    // 1. 鼠标的事件
    // onclick: 鼠标单击
    // onmousedown: 鼠标按下事件 
    // onmouseup: 鼠标抬起事件 
    // onmousemove: 鼠标移动事件
    // onmouseover: 鼠标进入事件
    // onmouseout: 鼠标离开事件
    // wheel: 滚轮事件
    // onscroll: window的滚动条事件


    // 2. 键盘事件
    // onkeydown: 键盘按下事件
    // onkeyup: 键盘抬起事件
    // onkeypress: 键盘按下并抬起



    // 3. 表单事件
    // onchange：普通输入框内容改变，并且失去焦点触发。下拉框，单选多选只有change
    // oninput：内容改变触发
    // onsubmit：提交的事件，只有form元素可以加onsubmit，只有里面的submit的提交按钮被点击时出发
    // onfocus：获得焦点事件
    // onblur: 失去焦点事件




    // 4. 其他事件
    // onload 当页面加载完以后自动执行
    // onresize 监听屏幕尺寸变化
    // oncontextmenu 鼠标右键



    // 5. 手机端的touch事件(需要在手机模式下才能触发)
    // touchstart 
    // touchend
    // touchmove

  </script>
</body>
</html>